<template>
  <div class="app-container">
    <el-dialog v-model="isDialog" title="页面代码" top="2vh" width="1000px" @close="closeDialog">
      <el-tabs v-model="activeTabs">
        <el-tab-pane label="表单页面" name="formPage"></el-tab-pane>
        <el-tab-pane label="表单代码" name="formCode"></el-tab-pane>
        <el-tab-pane label="表格页面" name="tablePage"></el-tab-pane>
        <el-tab-pane label="表格代码" name="tableCode"></el-tab-pane>
      </el-tabs>
      <el-scrollbar height="600px">
        <div class="page-box" v-if="activeTabs == 'formPage'">
          <FormPage :componentsList="dataForm.components" :formParams="dataForm.formParams" />
        </div>
        <div class="page-box" v-if="activeTabs == 'formCode'">
          <FormCode :codeStr="codeFormStr" />
        </div>
        <div class="page-box" v-if="activeTabs == 'tablePage'">
          <TablePage :componentsList="dataForm.components" />
        </div>
        <div class="page-box" v-if="activeTabs == 'tableCode'">
          <TableCode :codeStr="codeTableStr" />
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup>
import FormPage from './FormPage.vue'
import FormCode from './FormCode.vue'
import TablePage from './TablePage.vue'
import TableCode from './TableCode.vue'
import { careateFormHtml, careateTableHtml, formatElComponents, formatRuleForm, formatRules } from './createCode.js'

const { proxy } = getCurrentInstance()

const isDialog = ref(false)

const activeTabs = ref('formPage')

const emit = defineEmits(['close'])

const state = reactive({
  dataForm: {},
  codeFormStr: '',
  codeTableStr: ''
})

const { dataForm, codeFormStr, codeTableStr } = toRefs(state)

function init(data) {
  dataForm.value = JSON.parse(JSON.stringify(data))
  createFormCode(dataForm.value)
  createTableCode(dataForm.value)
  isDialog.value = true
}

// 生成 表单 code
function createFormCode(source) {
  let elComponentStr = formatElComponents(source)
  let ruleFormStr = formatRuleForm(source)
  let rulesStr = formatRules(source)
  codeFormStr.value = careateFormHtml(elComponentStr, ruleFormStr, rulesStr, source.formParams)
}
// 生成 表格 code
function createTableCode(source) {
  let elTableColumnCStr = formatElComponents(source)
  codeTableStr.value = careateTableHtml(elTableColumnCStr)
}

// 关闭弹框
function closeDialog() {
  emit('close')
}

defineExpose({
  init
})
</script>
<style lang="scss" scoped>
.page-box {
  overflow: hidden;
  padding: 0 20px;
}
</style>
